<!DOCTYPE HTML>
<html>
	<head>
		<title>liveplayer</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <style>
            .video-js{
                width: 70vw !important;
                height: 55.5vw !important;
            }
            .videoControl{
                position: absolute;
                top: 0px;
                right: 0px;
            }
            .videoControl .controlList{
                width: 4vw;
                height: 4vw;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin: 6px;
                cursor: pointer;
                background: #FFFFFF;
                border: 1px solid #04BBE3;
                transition: all 0.25s linear;
                border-radius: 4px;
                font-size: 1.2vw;
            }
            .videoControl .controlList:hover{
             transition: all 0.25s linear;
             background: #04BBE3;
            }
            .triangle{
                width: 0;
                height: 0;
                border: 10px solid transparent;
                border-top-color: #04BBE3;
                border-bottom: none;
            }
            .videoControl .controlList:hover .triangle{
                transition: all 0.25s linear;
                border-top-color: #FFFFFF;
            }
            .transformAngle{
                transform:rotate(135deg);
            }
            .transformAngleTop{
                transform:rotate(180deg);
            }
            .transformAngleTopRight{
                transform:rotate(225deg);
            }
            .transformAngleMidLeft{
                transform:rotate(90deg);
            }
            .transformAngleRight{
                transform:rotate(270deg);
            }
            .transformAngleLeftDown{
                transform:rotate(45deg);
            }
            .transformAngleRightDown{
                transform:rotate(315deg);
            }
        </style>
	</head>
	<body>
		<live-player id="player01" live="true" stretch="true" show-custom-button="false" autoplay click="videoOndbclick"></live-player>

        <div class="videoControl">
            <div class="controlList" onmousedown="videoControlBtnClick(1)" onmouseup="videoControlBtnUp(11)">
                <div class="triangle transformAngle"></div>
            </div>
            <div class="controlList" onmousedown="videoControlBtnClick(2)" onmouseup="videoControlBtnUp(22)">
                <div class="triangle transformAngleTop"></div>
            </div>
            <div class="controlList" onmousedown="videoControlBtnClick(3)" onmouseup="videoControlBtnUp(33)">
                <div class="triangle transformAngleTopRight"></div>
            </div>
            <br>
            <div class="controlList" onmousedown="videoControlBtnClick(4)" onmouseup="videoControlBtnUp(44)">
                <div class="triangle transformAngleMidLeft"></div>
            </div>
            <div class="controlList" onmousedown="videoControlBtnClick(5)" onmouseup="videoControlBtnUp(55)">
                <div>方向</div>
            </div>
            <div class="controlList" onmousedown="videoControlBtnClick(6)" onmouseup="videoControlBtnUp(66)">
                <div class="triangle transformAngleRight"></div>
            </div>
            <br>
            <div class="controlList" onmousedown="videoControlBtnClick(7)" onmouseup="videoControlBtnUp(77)">
                <div class="triangle transformAngleLeftDown"></div>
            </div>
            <div class="controlList" onmousedown="videoControlBtnClick(8)" onmouseup="videoControlBtnUp(88)">
                <div class="triangle"></div>
            </div>
            <div class="controlList" onmousedown="videoControlBtnClick(9)" onmouseup="videoControlBtnUp(99)">
                <div class="triangle transformAngleRightDown"></div>
            </div>
            <br>
            <div class="controlList" onmousedown="videoControlBtnClick(10)" onmouseup="videoControlBtnUp(1010)">
                <div>-</div>
            </div>
            <div class="controlList" onmousedown="videoControlBtnClick(11)" onmouseup="videoControlBtnUp(1111)">
                <div>变倍</div>
            </div>
            <div class="controlList" onmousedown="videoControlBtnClick(12)" onmouseup="videoControlBtnUp(1212)">
                <div>+</div>
            </div>
        </div>

        <script type="text/javascript" src="liveplayer-element.min.js"></script>
        <script type="text/javascript" src="jquery-3.4.1.min.js"></script>

		<script type="text/javascript">

            window.BASEURL="http://192.168.0.117:15323/api/ptz/";

            window.addEventListener("message", function(event) {
                var data = event.data;
                switch (data.cmd) {
                    case 'switchUrl':
                        // 处理业务逻辑
                        console.log("收到消息："+JSON.stringify(data.params));
                        var player = document.getElementById('player01');
                        player.setAttribute("video-url",data.params["path"]);
                        if(data.params['live'])
                        {
                            player.setAttribute('live',true);
                        }
                        else
                        {
                            player.setAttribute('live',false);
                        }
                        break;
                }
            });
            function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return (false);
            }
            var videoPath = decodeURIComponent(getQueryVariable("url"));
			//console.log('播放地址：' + videoPath);
			var player = document.getElementById('player01');
			player.setAttribute("video-url", videoPath);

			//鼠标双击事件
            function videoOndbclick(){
                setTimeout(function (){
                    var videoClick=document.getElementsByTagName("video")[0];
                    videoClick.ondblclick=function (){
                        console.log("双击事件！")

                    }
                },200)
            }
            videoOndbclick();


        // 鼠标点击事件
            function videoControlBtnClick(e){
                var contorlData={
                    leftRight:0,  //镜头左移右移 0:停止 1:左移 2:右移
                    upDown:0,     //镜头上移下移 0:停止 1:上移 2:下移
                    inOut:0,      //镜头放大缩小 0:停止 1:缩小 2:放大
                    moveSpeed:100,//镜头移动速度，0~255
                    zoomSpeed:0   //镜头缩放速度，0~255
                };
                var deviceId="3402000000118000001";
                var channelId="34020000001320000002";
                switch (e) {
                    case 1:$.ajax({url:window.BASEURL+deviceId+"/"+channelId,
                           data: {leftRight:1, upDown:1, inOut:0, moveSpeed:100, zoomSpeed:0},
                           type: 'POST', dataType: 'json',});break;
                    case 2:$.ajax({url:window.BASEURL+deviceId+"/"+channelId,
                        data: {leftRight:0, upDown:1, inOut:0, moveSpeed:100, zoomSpeed:0},
                        type: 'POST', dataType: 'json',});break;
                    case 3:$.ajax({url:window.BASEURL+deviceId+"/"+channelId,
                        data: {leftRight:2, upDown:1, inOut:0, moveSpeed:100, zoomSpeed:0},
                        type: 'POST', dataType: 'json',});break;
                    case 4:$.ajax({url:window.BASEURL+deviceId+"/"+channelId,
                        data: {leftRight:1, upDown:0, inOut:0, moveSpeed:100, zoomSpeed:0},
                        type: 'POST', dataType: 'json',});break;
                    case 6:$.ajax({url:window.BASEURL+deviceId+"/"+channelId,
                        data: {leftRight:2, upDown:0, inOut:0, moveSpeed:100, zoomSpeed:0},
                        type: 'POST', dataType: 'json',});break;
                    case 7:$.ajax({url:window.BASEURL+deviceId+"/"+channelId,
                        data: {leftRight:1, upDown:2, inOut:0, moveSpeed:100, zoomSpeed:0},
                        type: 'POST', dataType: 'json',});break;
                    case 8:$.ajax({url:window.BASEURL+deviceId+"/"+channelId,
                        data: {leftRight:0, upDown:2, inOut:0, moveSpeed:100, zoomSpeed:0},
                        type: 'POST', dataType: 'json',});break;
                    case 9:$.ajax({url:window.BASEURL+deviceId+"/"+channelId,
                        data: {leftRight:2, upDown:2, inOut:0, moveSpeed:100, zoomSpeed:0},
                        type: 'POST', dataType: 'json',});break;
                    case 10:$.ajax({url:window.BASEURL+deviceId+"/"+channelId,
                        data: {leftRight:0, upDown:0, inOut:1, moveSpeed:100, zoomSpeed:0},
                        type: 'POST', dataType: 'json',});break;
                    case 12:$.ajax({url:window.BASEURL+deviceId+"/"+channelId,
                        data: {leftRight:0, upDown:0, inOut:2, moveSpeed:100, zoomSpeed:0},
                        type: 'POST', dataType: 'json',});break;
                }
            }

        //鼠标抬起事件---停止控制
            function videoControlBtnUp(e) {
                var deviceId="3402000000118000001";
                var channelId="34020000001320000002";
                $.ajax({url:window.BASEURL+deviceId+"/"+channelId,
                    data: {leftRight:0, upDown:0, inOut:0, moveSpeed:100, zoomSpeed:0},
                    type: 'POST',
                    dataType: 'json',
                    success: function(res) {
                    }
                });
             }
		</script>
	</body>
</html>
